<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo2</title>
</head>
<body>
    <input type="button" value="按钮" class="button">
    <br>
    <input type="text" class="text">
    <br>
    <img src="./R-C.jpg" alt="图片加载失败" title="图片" width="300px" class="picture">
    <br>
    <input type="button" value="播放" class="music">
    <br>
    <input type="text" value="0" class="count">
    <input type="button" value="+1" class="add">
    <input type="button" value="-1" class="sub">
    <br>
    <input type="checkbox" class="all">选中全部
    <input type="checkbox" class="select">选项1
    <input type="checkbox" class="select">选项2
    <input type="checkbox" class="select">选项3
</body>
<script>
    //1.键盘事件
    //1.1点击
    let button = document.querySelector(".button");
    button.onclick = function(){
        alert("Hello World");
    }
    //1.2.1按下
    let text = document.querySelector(".text");
    text.onkeydown = function(event){
        console.log("正在输入");
        console.log(String.fromCharCode(event.keyCode));//不区分大小写,能检测所有键
        if(event.shiftKey || event.altKey){
            alert("shift或alt键被按下");
        }
    }
    // text.onkeypress = function(event){
    //     console.log("正在输入");
    //     console.log(String.fromCharCode(event.keyCode));//区分大小写,部分键无法检测
    // }
    //1.2.2抬起
    text.onkeyup = function(event){
        console.log("按键抬起");
    }
    //2.修改元素属性
    let picture = document.querySelector(".picture");
    console.dir(picture);
    picture.title = "修改后图片";
    picture.onclick = function(){
        alert("你点击了图片");
    }

    //3.修改表单元素属性
    //代码示例3.1:切换按钮的文本
    let music = document.querySelector(".music");
    music.onclick =  function(){
        if(music.value === "播放"){
            music.value = "暂停";
        }else{
            music.value = "播放";
        }
    }
    //代码示例3.2:点击计数
    let add = document.querySelector(".add");
    add.onclick = function(){
        let count = document.querySelector(".count");
        count.value = (parseInt(count.value) + 1);
    }
    let sub = document.querySelector(".sub");
    sub.onclick = function(){
        let count = document.querySelector(".count");
        count.value = (parseInt(count.value) - 1);
    }
    //代码示例3.3:全选/取消全选按钮
    let all = document.querySelector(".all");
    let select = document.querySelectorAll(".select");
    all.onclick = function(){
        for(let i = 0;i < select.length;i++){
            select[i].checked = all.checked;
        }
    }
    for(let i = 0;i < select.length;i++){
        select[i].onclick = function(){
            all.checked = isSelectAll(select);
        }
    }
    function isSelectAll(select){
        for(let i = 0;i < select.length;i++){
            if(select[i].checked === false){
                return false;
            }
        }
        return true;
    }
</script>
</html>